@import './buttons.styl'
@import './mixins.styl'

::-webkit-input-placeholder
  color rgba(red($gray),green($gray),blue($gray),.25)
  font-style italic

::-webkit-search-cancel-button
  /* Remove default */
  -webkit-appearance none
  display none
  
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border $border
  -webkit-text-fill-color $color
  -webkit-box-shadow 0 0 0px 1000px $bg-color inset
  transition background-color 5000s ease-in-out 0s
}

form
  padding 0
  margin 2em 0
  font-size 1em
  fieldset
    //borders()
    border none
    margin 0
    padding 0
    
    div
      display flex

  label
    font-size .9em
input
  margin 0

input:not([type='checkbox']):not([type='radio']), select, textarea
  font-size .9em 
  padding .375em .75em

legend
  color $brand
  font-size 1.125em
  flex 1
  width 100%
  border-color $color
  padding 0

label
  margin 0.250em
  margin-top 0.5em
  font-size .8em
  color $color

label + input[type='range']
  display block

//label + input[type='checkbox']
  //margin .5em 1em 0 1em


input, select,.input
  defaultsColors()
  background $forms-ctrls-bg
  border-width $border-width
  border-radius $border-radius
  border-color $border-color
  border-style none
  &:focus
    focus($forms-ctrls-bg)

input.error,select.error
  border-style solid

input[placehoder], ::-moz-placeholder, input::-moz-placeholder
  text-overflow ellipsis

input:disabled
  color $gray

input[type='radio'], input[type='checkbox']
  cursor pointer

input[type='radio'] + label, 
input[type='radio'] + .label
input[type='checkbox'] + label, 
input[type='checkbox'] + .label
   color $gray
   margin 0 0 0 .5em
   cursor pointer

input[type='radio']:checked + label, 
input[type='radio']:checked + .label
input[type='checkbox']:checked + label, 
input[type='checkbox']:checked + .label
  color $color

input.big
  font-size 1.125em

input[type='checkbox']
  appearance none
  border $color solid 0.1em
  width 1.1em
  height @width
  display inline-flex
  justify-content center
  align-items center
  align-self center

  &::after
    width 0.4em
    height @width
    content ''
    display block
    background trasparent

  &:checked
    &::after
      background $color
 
.form-help
  color $gray

  

.form-ctrls DIV.error
  border-style solid
  border-radius $border-radius